<template>
  <div class="box">
    <p style="margin-bottom: 10px;display: flex;flex-direction: row-reverse;">
      <el-button type="primary" @click="$router.back()">返回</el-button>
    </p>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item name="1">
        <template slot="title">
          <div class="firstCar">
            <span>车源信息</span>
            <!-- null //状态：101-未上架、102-审核中、103-被驳回、104-未上架被拉黑 -->
            <span>审核结果：{{
              data.childrenStatus == "101"
                ? "未上架"
                : data.childrenStatus == "102"
                  ? "审核中"
                  : data.childrenStatus == "103"
                    ? "被驳回"
                    : data.childrenStatus == "104"
                      ? "未上架被拉黑"
                      : ""
            }}</span>
          </div>
        </template>
        <el-row style="padding-left:30px" :gutter="20">
          <el-col
            :span="8"
          ><span>用户ID :{{ data.userId }}</span></el-col>
          <el-col
            :span="8"
          ><span>车源ID :{{ data.carSourceNo }}</span></el-col>
          <el-col
            :span="8"
          ><span>创建车源时间 : {{ data.createTime }}</span></el-col>
          <el-col
            :span="8"
          ><span>支持交易类型 :
            <el-checkbox v-model="checked1" disabled>车源地</el-checkbox>
            <el-checkbox
              v-model="checked2"
              disabled
            >目的地</el-checkbox></span></el-col>
          <el-col
            :span="8"
          ><span>提交时间 : {{ data.auditTime }}</span></el-col>
        </el-row>
      </el-collapse-item>

      <el-collapse-item title="交车设置" name="2">
        <el-row style="padding-left:30px" :gutter="20">
          <el-col :span="4"><span style="font-weight:700">价格</span></el-col>
          <el-col
            :span="8"
          ><span>发布价格 : {{ getVehicleSaleInfo.amount }}万</span></el-col>
        </el-row>
        <el-row style="padding-left:30px" :gutter="20">
          <el-col
            :span="4"
          ><span style="font-weight:700">收款账号</span></el-col>
          <el-col
            :span="4"
          ><span>收款人 : {{ getVehicleSaleInfo.payee }}</span></el-col>
          <el-col
            :span="5"
          ><span>开户银行 : {{ getVehicleSaleInfo.openBank }}</span></el-col>
          <el-col
            :span="6"
          ><span>收款卡号 : {{ getVehicleSaleInfo.bankCardNo }}</span></el-col>
          <el-col
            :span="5"
          ><span>绑定手机 : {{ getVehicleSaleInfo.bindMobile }}</span></el-col>
        </el-row>
        <el-row style="padding-left:30px" :gutter="20">
          <el-col
            :span="4"
          ><span style="font-weight:700">交车详细地址</span></el-col>

          <el-col
            :span="4"
          ><span>交车人:{{ getVehicleSaleInfo.name }}</span></el-col>
          <el-col
            :span="5"
          ><span>手机号 : {{ getVehicleSaleInfo.mobile }}</span></el-col>
          <el-col
            :span="10"
          ><span>车辆所在地 : {{ getVehicleSaleInfo.address }}</span></el-col>
        </el-row>
      </el-collapse-item>

      <el-collapse-item title="车辆基础信息" name="3">
        <el-row style="padding-left:30px" :gutter="20">
          <el-col
            :span="8"
          ><span>车辆识别代号/VIN : {{ getBasicInfo.vin }}</span></el-col>
          <el-col
            :span="4"
          ><span>上牌时间 : {{ getBasicInfo.spTime }}</span></el-col>
          <el-col
            :span="4"
          ><span>上牌城市 : {{ getBasicInfo.spCity }}</span></el-col>
          <el-col
            :span="4"
          ><span>所在城市 : {{ getBasicInfo.vehicleCity }}</span></el-col>
          <el-col
            :span="4"
          ><span>是否首任车主 : {{ getBasicInfo.firstMaster ? "是" : "否" }}</span></el-col>
          <el-col
            :span="8"
          ><span>品牌车系 : {{ getBasicInfo.brandModel }}</span></el-col>
          <!-- //使用性质:0-非运营，1-运营，2-营转非，3-租赁，4-教练 -->
          <el-col
            :span="4"
          ><span>使用性质 :
            {{
              getBasicInfo.useNature == 0
                ? "非运营"
                : getBasicInfo.useNature == 1
                  ? "运营"
                  : getBasicInfo.useNature == 2
                    ? "营转非"
                    : getBasicInfo.useNature == 3
                      ? "租赁"
                      : getBasicInfo.useNature == 4
                        ? "教练"
                        : ""
            }}</span></el-col>
          <el-col
            :span="4"
          ><span>过户次数 : {{ getBasicInfo.assignedNum }}</span></el-col>
          <el-col
            :span="4"
          ><span>车辆是否有抵押 :
            {{ getBasicInfo.isPledge == 0 ? "否" : "是" }}</span></el-col>
        </el-row>
      </el-collapse-item>

      <el-collapse-item title="车辆证件" name="4">
        <el-row style="padding-left:30px" :gutter="20">
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="getVehicleImage.imgZy"
                  alt=""
                  :preview-src-list="[getVehicleImage.imgZy]"
                />
              </span>
              <span>行驶证主页</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="getVehicleImage.imgFyFront"
                  :preview-src-list="[getVehicleImage.imgFyFront]"
                  alt=""
                />
              </span>
              <span>行驶证副页（正面）</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="getVehicleImage.imgFyReverse"
                  :preview-src-list="[getVehicleImage.imgFyReverse]"
                  alt=""
                />
              </span>
              <span>行驶证副页（反面）</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="getVehicleImage.imgJdcdjzs12"
                  alt=""
                  :preview-src-list="[getVehicleImage.imgJdcdjzs12]"
                />
              </span>
              <span>机动车登记证书1、2页</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="getVehicleImage.imgJdcdjzs34"
                  :preview-src-list="[getVehicleImage.imgJdcdjzs34]"

                  alt=""
                />
              </span>
              <span>机动车登记证书3、4页</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="getVehicleImage.imgJdcdjzs56"
                  :preview-src-list="[getVehicleImage.imgJdcdjzs56]"
                  alt=""
                />
              </span>
              <span>机动车登记证书5、6页</span>
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>

      <el-collapse-item title="车辆照片视频" name="5">
        <el-row style="padding-left:30px" :gutter="20">
          <p style="padding-left: 30px;line-height: 50px;font-weight: 800;">
            展示主图
          </p>
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="getVehicleImage.mainImage"
                  :preview-src-list="[getVehicleImage.mainImage]"
                  alt=""
                />
              </span>
              <span>车辆左前45°角</span>
            </div>
          </el-col>
        </el-row>
        <el-row
          v-if="getVehicleImage.exteriorImage"
          style="padding-left:30px"
          :gutter="20"
        >
          <p style="padding-left: 30px;line-height: 50px;font-weight: 800;">
            车身外观
          </p>
          <el-col
            v-for="item in getVehicleImage.exteriorImage"
            :key="item.imgType"
            :span="8"
          >
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="item.imageUrl"
                  :preview-src-list="[item.imageUrl]"
                  alt=""
                />
              </span>
              <span>{{
                item.imgType == 101
                  ? "车辆左前45度角"
                  : item.imgType == 102
                    ? "车辆右后45度角"
                    : item.imgType == 103
                      ? "主驾前侧"
                      : item.imgType == 104
                        ? "主驾后侧"
                        : item.imgType == 105
                          ? "副驾前侧"
                          : item.imgType == 106
                            ? "副驾后侧"
                            : item.imgType == 111
                              ? "左前大灯"
                              : item.imgType == 112
                                ? "右前大灯"
                                : item.imgType == 113
                                  ? "左尾灯"
                                  : item.imgType == 114
                                    ? "右尾灯"
                                    : item.imgType == 115
                                      ? "左前轮"
                                      : item.imgType == 116
                                        ? "左后轮"
                                        : item.imgType == 117
                                          ? "车门"
                                          : item.imgType == 118
                                            ? "右前轮"
                                            : item.imgType == 119
                                              ? "右后轮"
                                              : item.imgType == 1111
                                                ? "左后45度角"
                                                : item.imgType == 1112
                                                  ? "右前45角"
                                                  : item.imgType == 1113
                                                    ? "车辆正面"
                                                    : item.imgType == 1114
                                                      ? "车辆后面"
                                                      : item.imgType == 1115
                                                        ? "车辆左边"
                                                        : item.imgType == 1116
                                                          ? "车辆右边"
                                                          : item.imgType == 121
                                                            ? "其他选拍"
                                                            : ""
              }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row
          v-if="getVehicleImage.insideImage"
          style="padding-left:30px"
          :gutter="20"
        >
          <p style="padding-left: 30px;line-height: 50px;font-weight: 800;">
            车辆内饰
          </p>
          <el-col
            v-for="item in getVehicleImage.insideImage"
            :key="item.imgType"
            :span="8"
          >
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :preview-src-list="[item.imageUrl]"
                  :src="item.imageUrl"
                  alt=""
                />
              </span>
              <span>{{
                item.imgType == 101
                  ? "车辆左前45度角"
                  : item.imgType == 102
                    ? "车辆右后45度角"
                    : item.imgType == 103
                      ? "主驾前侧"
                      : item.imgType == 104
                        ? "主驾后侧"
                        : item.imgType == 105
                          ? "副驾前侧"
                          : item.imgType == 106
                            ? "副驾后侧"
                            : item.imgType == 111
                              ? "左前大灯"
                              : item.imgType == 112
                                ? "右前大灯"
                                : item.imgType == 113
                                  ? "左尾灯"
                                  : item.imgType == 114
                                    ? "右尾灯"
                                    : item.imgType == 115
                                      ? "左前轮"
                                      : item.imgType == 116
                                        ? "左后轮"
                                        : item.imgType == 117
                                          ? "车门"
                                          : item.imgType == 118
                                            ? "右前轮"
                                            : item.imgType == 119
                                              ? "右后轮"
                                              : item.imgType == 1111
                                                ? "左后45度角"
                                                : item.imgType == 1112
                                                  ? "右前45角"
                                                  : item.imgType == 1113
                                                    ? "车辆正面"
                                                    : item.imgType == 1114
                                                      ? "车辆后面"
                                                      : item.imgType == 1115
                                                        ? "车辆左边"
                                                        : item.imgType == 1116
                                                          ? "车辆右边"
                                                          : item.imgType == 121
                                                            ? "其他选拍"
                                                            : ""
              }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row
          v-if="getVehicleImage.chassisImage"
          style="padding-left:30px"
          :gutter="20"
        >
          <p
            style="padding-left: 30px;line-height: 50px;font-weight: 800;"
          >
            机舱底盘
          </p>
          <el-col
            v-for="item in getVehicleImage.chassisImage"
            :key="item.imgType"
            :span="8"
          >
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image style="width: 200px;height: 200px;" :src="item.imageUrl" alt="" :preview-src-list="[item.imageUrl]" />
              </span>
              <span>{{
                item.imgType == 101
                  ? "车辆左前45度角"
                  : item.imgType == 102
                    ? "车辆右后45度角"
                    : item.imgType == 103
                      ? "主驾前侧"
                      : item.imgType == 104
                        ? "主驾后侧"
                        : item.imgType == 105
                          ? "副驾前侧"
                          : item.imgType == 106
                            ? "副驾后侧"
                            : item.imgType == 111
                              ? "左前大灯"
                              : item.imgType == 112
                                ? "右前大灯"
                                : item.imgType == 113
                                  ? "左尾灯"
                                  : item.imgType == 114
                                    ? "右尾灯"
                                    : item.imgType == 115
                                      ? "左前轮"
                                      : item.imgType == 116
                                        ? "左后轮"
                                        : item.imgType == 117
                                          ? "车门"
                                          : item.imgType == 118
                                            ? "右前轮"
                                            : item.imgType == 119
                                              ? "右后轮"
                                              : item.imgType == 1111
                                                ? "左后45度角"
                                                : item.imgType == 1112
                                                  ? "右前45角"
                                                  : item.imgType == 1113
                                                    ? "车辆正面"
                                                    : item.imgType == 1114
                                                      ? "车辆后面"
                                                      : item.imgType == 1115
                                                        ? "车辆左边"
                                                        : item.imgType == 1116
                                                          ? "车辆右边"
                                                          : item.imgType == 121
                                                            ? "其他选拍"
                                                            : ""
              }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row style="padding-left:30px" :gutter="20">
          <p style="padding-left: 30px;line-height: 50px;font-weight: 800;">
            车辆视频
          </p>
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <video
                  :src="getVehicleImage.videoUrl"
                  controls="controls"
                  style="    width: 300px;
    height: 300px;"
                />
              </span>
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="车况描述" name="6">
        <el-row style="padding-left:30px" :gutter="20">
          <el-col
            :span="8"
          ><span>动力状况:{{
            getVehicleCondition.powerLevel == 0
              ? "优"
              : getVehicleCondition.powerLevel == 1
                ? "良"
                : getVehicleCondition.powerLevel == 2
                  ? "差"
                  : ""
          }}</span></el-col>
          <el-col
            :span="8"
          ><span>功能状况 :{{
            getVehicleCondition.functionsLevel == 0
              ? "优"
              : getVehicleCondition.functionsLevel == 1
                ? "良"
                : getVehicleCondition.functionsLevel == 2
                  ? "差"
                  : ""
          }}</span></el-col>
          <el-col
            :span="8"
          ><span>外观状况 :
            {{
              getVehicleCondition.facadeLevel == 0
                ? "优"
                : getVehicleCondition.facadeLevel == 1
                  ? "良"
                  : getVehicleCondition.facadeLevel == 2
                    ? "差"
                    : ""
            }}</span></el-col>
          <el-col
            :span="8"
          ><span>车辆内饰 :
            {{
              getVehicleCondition.innerLevel == 0
                ? "优"
                : getVehicleCondition.innerLevel == 1
                  ? "良"
                  : getVehicleCondition.innerLevel == 2
                    ? "差"
                    : ""
            }}</span></el-col>
          <el-col
            :span="8"
          ><span>事故等级 :
            {{
              getVehicleCondition.accidentLevel == 1
                ? "优"
                : getVehicleCondition.accidentLevel == 2
                  ? "良"
                  : getVehicleCondition.accidentLevel == 3
                    ? "差"
                    : getVehicleCondition.accidentLevel == 4
                      ? "差"
                      : ""
            }}</span></el-col>
        </el-row>
        <el-row style="padding-left:30px" :gutter="20">
          <el-col
            :span="24"
          ><span>车况介绍 : {{ getVehicleCondition.vehicleRemark }}</span></el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeNames: ['1', '2', '3'],
      data: {},
      checked1: false,
      checked2: false,
      getBasicInfo: {},
      getVehicleCondition: {},
      getVehicleImage: {},
      getVehicleSaleInfo: {}
    }
  },
  async created() {
    await this.inquire()
  },
  methods: {
    handleChange(val) {
      console.log(val)
    },
    inquire() {
      // 上架车辆详情
      this.$get(
        '/web/vehicleStayOnSale/details?carInfoId=' +
          this.$route.query.carInfoId
      ).then(res => {
        if (res.data.code === '0') {
          this.data = res.data.data
          this.checked1 = res.data.data.sourceTrade
          this.checked2 = res.data.data.destinationTrade
        }
      })
      // 车辆基础信息
      this.$get(
        '/web/vehicleInfo/getBasicInfo?carInfoId=' + this.$route.query.carInfoId
      ).then(res => {
        if (res.data.code === '0') {
          this.getBasicInfo = res.data.data
        }
      })
      // 车辆车况描述
      this.$get(
        '/web/vehicleInfo/getVehicleCondition?carInfoId=' +
          this.$route.query.carInfoId
      ).then(res => {
        if (res.data.code === '0') {
          this.getVehicleCondition = res.data.data
        }
      })
      // 车辆相关图片信息
      this.$get(
        '/web/vehicleInfo/getVehicleImage?carInfoId=' +
          this.$route.query.carInfoId
      ).then(res => {
        if (res.data.code === '0') {
          this.getVehicleImage = res.data.data
        }
      })
      // 车辆交车设置/出售信息
      this.$get(
        '/web/vehicleInfo/getVehicleSaleInfo?carInfoId=' +
          this.$route.query.carInfoId
      ).then(res => {
        if (res.data.code === '0') {
          this.getVehicleSaleInfo = res.data.data
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.box /deep/ {
  // padding: 20px;
  margin: 30px;
  border-left: 1px solid #e6ebf5;
  border-right: 1px solid #e6ebf5;
  .firstCar {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .el-collapse-item__header {
    padding-left: 20px;
  }
}
</style>
